<template>
	<div id="hotSongs">
		<div class="hot_sing" v-for="(h,index) in hotSongs" @click="play(h.id)">
			<span class="no"><span v-if="index<9">0</span>{{index+1}}</span>
			<span class="sing_name">
				{{h.name}}
			</span>
			<p class="singer">
				<span  v-for="(a,i) in h.ar">{{a.name}}<span v-if="!(i == h.ar.length-1) ">/</span> </span>
				<span></span>
			</p>
		</div>
	</div>
	
</template>

<script>
	import axios from 'axios';
	
	export default{
		beforeMount(){
			
			var id = this.$store.state.geshouId;
			axios.get('https://netease.bluej.cn/artists?timestamp=11&id='+id).then((res)=>{
				console.log(res.data.hotSongs)
				this.hotSongs=res.data.hotSongs;
			})
		},
		data(){
			return{
				name:'hotSongs',
				hotSongs:[],
			}
		},
		methods:{
			play(songid){
				this.$store.commit("change",{
					playState:true,
					id:songid,
				});
				console.log("aaa",this);
				this.$parent.$parent.$refs.player.getSong();
				this.$router.push({path:"/play",query:{id:songid}});
				this.$parent.$parent.flag=false;
			}
		}
		
	}
	
	
	
	
</script>

<style lang="scss">
#hotSongs{
	padding-top: 38px;
	padding-bottom: 60px;
	.hot_sing{
		padding-top: 10px;
		color: #E6E6E6;
		text-align: left;
		overflow:hidden;
		/*position: relative;*/
		height: 60px;
		.no{
			display: inline-block;
			text-align: center;
			width: 45px;
			/*height: 40px;*/
		}
		.sing_name{
			display: inline-block;
			width: 70%;
			font-size: 17px;
			color: white;
			overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
		}
		.singer{
			overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
			 margin-left: 50px;
			 color: #bababb;
			 span{
			 	font-size: 12px;
			 	span{
			 		margin: 0 5px;
			 	}
			 }
		}
		}
}
</style>